<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hello{
            position: relative;
            text-align: center;
        }

    </style>
</head>
<body style="background-image: url(assets/i/person_back.png)">
    <div class="hello" id="hello">
        <div id="name" style="font-size: 50px"></div>
        <hr>
        <div id="role" style="font-size: 24px"></div>
    </div>

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</body>
<script>
    $(document).ready(function(){
        var screenHei = parent.document.body.clientHeight;

        $("#hello").css({
            "top": screenHei/4 + "px"
        })

        $.ajax({
            url: '/fortune/cat/user/person',
            type: "GET",
            data: null,
            contentType: 'application/json;charset=UTF-8',
            dataType: "json",
            success: function (data) {
                if (data.code == "200"){
                    var user = data.message;

                    $("#name").html("Hello " + user);
                    $("#role").append("welcome fortune cat");
                }
            },
            error: function () {
            }
        });
    });
</script>
</html>